Step 2 - Create the application navigation

In this step of the tutorial you create the application navigation to allow the user to switch between the application screens. You also highlight the navigation button for the application the user selects.

Create the application navigation

In this section you create the navigation buttons at the bottom of the application user interface which you use to navigate between the Home, Media, and Car applications, and the Settings popup window.

One of the characteristics of the Page and Page Host nodes is that the content of all active Page and Page Host nodes in an application is always shown. Because the RootPage node is at the top of the hierarchy it is always active and all the content in the RootPage node is always shown on all Page and Page Host nodes in the application. This is why RootPage node is a good place to hold the navigation buttons for the whole application.

To create the application navigation:

1. In the Project press Alt and right-click the RootPage node, select Toggle Button Group 2D, name it Navigation, and in the Properties add and set:
   • Layout Height to 179
   • Vertical Alignment to Bottom
   • Background Brush to + Texture Brush, click next to the property name, and set the Brush Texture property of the brush to the Footer texture.
     
     TIP

     In the Properties click next to a property to access and edit the resource to which the property points without moving away from the currently selected node.

   
2. In the Project press Alt and right-click the Navigation node, select Grid Layout 2D, and in the Properties:
   • In the Columns click to add one more column.
     You need four columns in the Grid Layout 2D node because there are four buttons in the navigation.
   • Set all columns to Proportional.
     This way each button takes an equal amount of space in the Grid Layout 2D node.
   • In the Rows click to remove all but one row.
     You need only one row in the Grid Layout 2D node because there is only one row of buttons in the navigation.
   • Add and set Horizontal Alignment to Stretch.
     When you set the Horizontal Alignment property to Stretch you tell the node to take as much space on the x axis as it can.
   • Add and set Vertical Alignment to Bottom.
   
3. Create the navigation buttons in the Grid Layout 2D node which you use to navigate to different Page and Page Host nodes in your application:
   1. In the Project in the Grid Layout 2D create a Toggle Button 2D node, name it HomeButton, and inside it create an Image node.
      
   2. In the Project select the HomeButton node, and in the Properties add and set:
      • Toggle State to 1
        You set the HomeButton toggle button to be selected by default when you start your application.
      • Horizontal Alignment to Center
      • Index in Group to -1
        Kanzi uses the Index in Group property to keep track of which button is selected in a Toggle Button Group node. When the value of the Index in Group property is -1 the Toggle Button Group node sets the index for that Toggle Button.
        
        TIP

        To add a property, right-click in the Properties, select Add Property, and then select the property you want to add.
        For example, to add the Index in Group property, right-click in the Properties, and select Add Property > Button > Index in Group.

        
   3. In the Project select the HomeButton node and in the State Tools click Create State Manager to create a state manager.
      You can find the State Tools at the bottom of the Kanzi Studio interface, below the Preview.
      
   4. In the State Tools click Create State to create a state. Create two states, double-click the state names, and name them NotSelected and Selected.
      
   5. In the Project select the HomeButton > Image node, in the Properties set the Image property to the Btn_Home texture, and in the State Tools click to save the change to the NotSelected state.
      
   6. Set the Image property to the Btn_Home_Selected texture and in the State Tools click to save the change to the Selected state.
      
   7. In the State Tools click the <No Controller Property> dropdown menu and select the Button > Toggle State property.
      In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
      
   8. In the State Tools set the value of the Toggle State controller property for each state. For the Selected state set the value to 1, and for the NotSelected state leave the value set to 0.
      With this setting when the value of the Toggle State property is 0 in the node which uses this state manager, the state manager sets the application state to the NotSelected state, and when it is 1 it sets the application state to the Selected state.
      
   9. In the State Tools click Edit State Manager to deactivate the State Tools.
      
      TIP

      When State Tools are switched on Kanzi Studio keeps track of all property changes in your project. For this reason it is a good practice to switch the State Tools off when you are done setting the states in a specific state manager.

      
   10. In the Project select the HomeButton node, in the State Tools click the Any -> Any transition, in the State Transition Editor set the Duration property to 0, and click Save.
       In a State Transition Editor when you set the Duration property to 0 Kanzi transitions instantly between the selected states.
       
   11. In the Project select the HomeButton > Image node, in the Properties right-click the Image property and select Remove.
       The value you set for a property in a state manager overrides the local value of that property. You can remove the Image property because the HomeButton node uses a state manager which sets that property.
       
4. Create the MediaButton toggle button:
   1. In the Project right-click the HomeButton node, select Duplicate, press the F2 key, and rename the new node to MediaButton.
      
   2. In the Library > State Managers duplicate the HomeButton State Manager and rename the new state manager to MediaButton State Manager.
      
   3. In the Project select the MediaButton node and in the Properties set the State Manager property to MediaButton State Manager.
      This way you set the MediaButton State Manager to control the MediaButton node.
      
   4. In the Library > State Managers > MediaButton State Manager > State Group > NotSelected state select the Image state object and in the Properties set the Image property to Btn_Media.
      This way you set the MediaButton to show the Btn_Media texture when the toggle button is in the NotSelected state.
      
   5. In the Library > State Managers > MediaButton State Manager > State Group > Selected state select the Image state object and in the Properties set the Image property to Btn_Media_Selected.
      This way you set the MediaButton to show the Btn_Media_Selected texture when the toggle button is in the Selected state.
      
5. Repeat the previous step to create the CarButton and SettingsButton toggle buttons and their state managers. For these state managers in the Image state objects use these textures:
   • For the CarButton State Manager use the Btn_Car for the NotSelected and Btn_Car_Selected texture for the Selected state.
   • For the SettingsButton State Manager use the Btn_Settings for the NotSelected and Btn_Settings_Selected texture for the Selected state.
   
6. In the Project select the HomeButton node, in the Node Components > Triggers section in the Toggle Button: Toggled On trigger click the Add dropdown menu, select the Navigate to Page action, and in the Navigate to Page action window select the Home node.
   
7. Repeat the previous step for the MediaButton and CarButton toggle buttons. For these toggle buttons set the Navigate to Page action:
   • For the MediaButton set the Media node.
   • For the CarButton set the Car node.
8. When you click the Home, Media, and Car buttons in the Preview you go to the Page nodes you set in the Navigate to Page actions.
   
   TIP

   In the Interact mode you can interact with your application in the Preview window as you would on a device. When you are using a Preview tool, to switch to the Interact mode, in the Preview window click .

See also

To find out more about the Page and Page Host nodes, see Using the Page and Page Host nodes.

To find out more about working with the state managers, see Creating state managers.

To find out more about working with triggers and actions, see Triggers.

Open topic with navigation